<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../../static/layer/css/layui.css"/>
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css">
    <script type="text/javascript" src="../../static/layer/layui.js"></script>
    <script src="../../static/layer/lay/modules/table.js"></script>

    <style>
        .lay-box{
            width: 1024px;
        }
        .layui-table-fixed.layui-table-fixed-b{
            top: inherit;
            z-index: 2;
        }
        .layui-table-fixed.layui-table-fixed-br{
            top: inherit;
            z-index: 2;
        }
        #tabBox{
            width: 1200px;
        }

        #tabBox .laytable-cell-1-index{
            background: #f5f5f5;
        }
        .layui-table-foot td{
            border-bottom:0
        }
    </style>
</head>
<body>
<div class="lay-box">
    <div id="tableBox"></div>
    <div id="tableBox2"></div>
</div>
<script>
    layui.use('table', function(){
        var table = layui.table;
        var tableIns = table.render({
            elem : '#tableBox',
            width: 'full',
            height:"full",
            maxHeight:400,
            page : false,
            footer:true,
            even : true,
            sort :true,
            limits: [20,50,100],
            cols : [[
                { field: 'item1', title:'条目条目1',width : 100,fixed:'left'},
                { field: 'item--2', title:'条目2',width : 200,},
                { field: 'item--3', title:'条目3',width : 200,},
                { field: 'item--4', title:'条目4',width : 200,},
                { field: 'item5', title:'条目5',width : 200,},
                { field: 'item6', title:'条目6',width : 200,fixed:'right'},
            ]],
            foot:[[
                {field: 'item1',title:'汇总',fixed:'left'},
                {field: 'item--2',title:'数据2'},
                {field: 'item--3',title:'数据3'},
                {field: 'item--4',title:'数据4'},
                {field: 'item5',title:'数据5'},
                {field: 'item6',title:'数据6',fixed:'right'},
            ]],
            data:[
                {item1:"1","item--2":2,'item--3':3,"item--4":"4",item5:"5",item6:"6"},
                {item1:"1","item--2":2,'item--3':3,"item--4":"4",item5:"5",item6:"6"},
                {item1:"1","item--2":2,'item--3':3,"item--4":"4",item5:"5",item6:"6"},


                {item1:"1","item--2":2,'item--3':3,"item--4":"4",item5:"5",item6:"6"},
                {item1:"last","item--2":"last",'item--3':"last","item--4":"last",item5:"last",item6:"last"},
            ]
        });
    });
</script>
</body>
</html>